<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .box {
        height: 500px;
        background-color: #cfcccc;
        ul {
          list-style: none;
          height: 400px;
          padding-top: 50px;

          li:hover {
            box-shadow: 0px 0px 10px 10px rgb(237, 233, 233);
          }

          li {
            display: inline-block;
            width: 300px;
            height: 400px;
            background-color: rgb(113, 114, 114);
            margin-left: 30px;

            .image {
              display: inline-block;
              margin-left: 50px;
              margin-top: 70px;
              padding-bottom: 40px;

              img {
                width: 200px;
              }
            }
            .text {
              .name {
                text-align: center;
              }
              .present {
                text-align: center;
                color: #ccc;
              }
              .price {
                text-align: center;
                color: red;
              }
              .oldprice {
                color: #ccc;
                padding-left: 5px;
                text-decoration: line-through;
              }
            }
          }
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li>
          <div class="image">
            <img src="./C.jpg" />
          </div>
          <div class="text">
            <h2 class="name">小米全面屏电视机</h2>
            <p class="present">全面屏设计，人工智能语言</p>
            <br />
            <p class="price">2399元 <a class="oldprice">3700元</a></p>
          </div>
        </li>
        <li>
          <div class="image">
            <img src="./C.jpg" />
          </div>
          <div class="text">
            <h2 class="name">小米全面屏电视机</h2>
            <p class="present">全面屏设计，人工智能语言</p>
            <br />
            <p class="price">2399元</p>
          </div>
        </li>
        <li>
          <div class="image">
            <img src="./C.jpg" />
          </div>
          <div class="text">
            <h2 class="name">小米全面屏电视机</h2>
            <p class="present">全面屏设计，人工智能语言</p>
            <br />
            <p class="price">2399元 <a class="oldprice">3700元</a></p>
          </div>
        </li>
        <li>
          <div class="image">
            <img src="./C.jpg" />
          </div>
          <div class="text">
            <h2 class="name">小米全面屏电视机</h2>
            <p class="present">全面屏设计，人工智能语言</p>
            <br />
            <p class="price">2399元</p>
          </div>
        </li>
        <li>
          <div class="image">
            <img src="./C.jpg" />
          </div>
          <div class="text">
            <h2 class="name">小米全面屏电视机</h2>
            <p class="present">全面屏设计，人工智能语言</p>
            <br />
            <p class="price">2399元</p>
          </div>
        </li>
      </ul>
    </div>
  </body>
</html>
